/* 导入 Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Caveat&family=Noto+Sans+Mono&family=Noto+Serif&display=swap');

/* 导入 MiSans 字体 */
@import url('https://cdn.jsdelivr.net/npm/misans@4.0.0/lib/Normal/MiSans-Medium.min.css');
@import url('https://cdn.jsdelivr.net/npm/misans@4.0.0/lib/Normal/MiSans-Bold.min.css');

:root {
    --banner-scale: 0.8; /* 基准缩放比例 */
    --base-padding: 20px;
    --base-title-size: 18px;
    --base-text-size: 12px;
    --base-height: 39px;
    --base-margin: 6px;
    --font-size-small: 0.85;
    --font-size-normal: 1;
    --font-size-large: 1.15;
    --current-font-size: var(--font-size-normal);
    --font-weight-normal: 400;
    --font-weight-bold: 700;
    --font-weight-black: 900;
    --current-font-weight: var(--font-weight-bold);
    --font-family-default: system-ui, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
    --font-family-misans: "MiSans", var(--font-family-default); /* 添加 MiSans 字体 */
    --font-family-caveat: 'Caveat', cursive;
    --font-family-helvetica: "Helvetica Neue", Helvetica, Arial, sans-serif;
    --font-family-futura: Futura, "Trebuchet MS", Arial, sans-serif;
    --font-family-avenir: Avenir, "Avenir Next", "Segoe UI", sans-serif;
    --font-family-didot: Didot, "Bodoni MT", "Times New Roman", serif;
    --current-font-family: var(--font-family-default);
}

#app {
    width: 800px;
    margin: 0 auto;
    padding: 20px 0;
}

.picseal-title {
    font-family: var(--font-family-caveat), system-ui;
}

.picseal-description {
    font-family: var(--font-family-misans), system-ui;
}

.preview-box {
    margin-bottom: 16px;
}

.preview {
    box-shadow: 7px 4px 15px #ccc;
    background: #fff;
}

.preview-picture {
    max-width: 100%;
    transition: opacity 0.6s ease-in-out, transform 0.6s ease-in-out;
    opacity: 0; /* 初始透明度 */
    transform: scale(0.95); /* 初始缩放 */
}

.preview-picture.loaded {
    opacity: 1; /* 加载完成后设置为不透明 */
    transform: scale(1); /* 恢复到正常大小 */
}

.preview-picture.fade {
    opacity: 0; /* 在切换时设置为透明 */
    transform: scale(0.95); /* 在切换时缩小 */
}

.preview-info {
    padding: calc(var(--base-padding) * var(--banner-scale));
    display: flex;
    flex-direction: row; /* Keep it as row for horizontal layout */
    font-family: var(--current-font-family), system-ui;
    align-items: center; /* Align items vertically centered */
}

.preview-info-left {
    flex-grow: 1;
    width: auto; /* Allow it to size based on content */
    position: relative;
    display: flex;
    flex-direction: column; /* Stack items vertically */
    align-items: flex-start;
    justify-content: center; /* Center items vertically */
}

.preview-info-split {
    border-left: 2px solid #ddd;
    height: calc(var(--base-height) * var(--banner-scale));
    margin-top: calc(var(--base-margin) * var(--banner-scale));
    margin-right: 12px;
    margin-left: 12px;
}

.preview-info-right {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
}

.preview-info-model,
.preview-info-device {
    font-weight: var(--current-font-weight);
    font-size: calc(var(--base-title-size) * var(--banner-scale) * var(--current-font-size));
    white-space: nowrap; /* Prevent line breaks */
}

.preview-info-date,
.preview-info-gps {
    font-size: calc(var(--base-text-size) * var(--banner-scale) * var(--current-font-size));
    color: #aaa;
    white-space: nowrap; /* Prevent line breaks */
}

.preview-info-brand {
    position: absolute;
    right: 0;
    top: 0;
    height: 100%;
    display: flex;
    align-items: center;
}

.preview-info-brand img {
    height: calc(var(--base-height) * var(--banner-scale));
}

/* Exhibition Styles */
.exhibition {
    display: flex;
    justify-content: center;
    margin-top: 20px;
    margin-bottom: 20px;
    gap: 1rem;
    padding: 1rem;
}

.exhibition .ant-btn {
    transition: background-color 0.3s ease, transform 0.2s ease;
}

.exhibition .ant-btn:hover {
    background-color: #4a90e2;
    transform: translateY(-2px);
}

.op {
    display: flex;
    justify-content: center;
    margin-top: 20px;
    gap: 1rem;
    padding: 1rem;
}

.op .ant-btn {
    transition: background-color 0.3s ease, transform 0.2s ease;
}

.op .ant-btn:hover {
    background-color: #4a90e2;
    transform: translateY(-2px);
}

/* Props Section Styles */

.props {
    margin-top: 24px;
}

.props .ant-form-horizontal .ant-form-item {
    margin-top: 16px;
    margin-bottom: 16px;
}

.props-title {
    margin-bottom: 16px; /* Space below the title */
    color: #2c3e50; /* Darker color for the title */
    font-weight: 600; /* Bold title for emphasis */
}

.props-option {
    background-color: #ffffff; /* White background for the props container */
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1); /* Deeper shadow for more depth */
    border-radius: 12px; /* Rounded corners for a modern look */
    padding: 24px; /* Increased padding for better spacing */
    transition: transform 0.2s ease; /* Smooth transition for hover effect */
}

.props-option:hover {
    transform: translateY(-2px); /* Lift effect on hover */
}

/* Input and Select Styles */
.ant-input,
.ant-select-selector {
    border-radius: 8px; /* Rounded corners for inputs and selects */
    border: 1px solid #d9d9d9; /* Light gray border */
    transition: border-color 0.3s ease, box-shadow 0.3s ease; /* Smooth transition for focus effects */
    padding: 10px; /* Increased padding for better usability */
}

.ant-input:focus,
.ant-select-selector:focus {
    border-color: #007bff; /* Blue border on focus */
    box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.2); /* Subtle blue shadow on focus */
}

/* Slider Styles */
.ant-slider {
    margin-top: 8px; /* Space above the slider */
}

/* Typography Styles */
.ant-typography {
    color: #333; /* Darker text color for better readability */
}

/* Button Styles */
.ant-btn {
    border-radius: 8px; /* Rounded corners for buttons */
    transition: background-color 0.3s ease, transform 0.2s ease; /* Smooth transition for hover effects */
}

.ant-btn:hover {
    background-color: #0056b3; /* Darker blue on hover */
    transform: translateY(-2px); /* Lift effect on hover */
}

/* Switch Styles */
.switch-title {
    color: #aaa; /* Light gray color for the title */
    font-family: var(--current-font-family), system-ui;
    font-size: 12px; /* Font size for the title */
}

.ant-switch {
    border-radius: 20px; /* Rounded corners for a modern look */
    background-color: #e0e0e0; /* Light gray background color */
    transition: background-color 0.3s ease; /* Smooth transition for background color */
}

.ant-switch-checked {
    background-color: #a0c4ff; /* Light blue background color when checked */
}

.ant-switch-checked:hover {
    background-color: #8ab8ff; /* Lighter shade on hover when checked */
}

/* Tooltip Styles */
.ant-tooltip {
    border-radius: 8px; /* Rounded corners for tooltips */
    background-color: #f0f0f0; /* Light background for better contrast */
    color: #333; /* Dark text for readability */
    padding: 8px; /* Padding for better spacing */
    font-size: 14px; /* Font size for tooltip text */
}

.ant-tooltip-arrow {
    border-color: #f0f0f0; /* Match arrow color with tooltip background */
}
